<template>
    <div class="order">
        <div class="top">
                订单信息
        </div>
        <div class="tab">
            <div class="t-item" :class="{active : flag == 0}" @click="flag = 0">
                <div class="text">待付款</div>
                <div class="num">0</div>
            </div>
            <div class="t-item" :class="{active : flag == 1}" @click="flag = 1">
                <div class="text">待发货</div>
                <div class="num">0</div>
            </div>
            <div class="t-item" :class="{active : flag == 2}" @click="flag = 2">
                <div class="text">待收货</div>
                <div class="num">0</div>
            </div>
            <div class="t-item" :class="{active : flag == 3}" @click="flag = 3">
                <div class="text">待评价</div>
                <div class="num">0</div>
            </div>
        </div>
        <div class="detail">
            <div class="d-top">
                <div class="time">2022-01-07 14:23:04</div>
                <div class="status">未发货</div>
            </div>
            <div class="d-content">
                <div class="img">
                    <img src="http://47.115.51.185//uploads/attach/2021/06/20210626/8748d30c0690284c24c8002f85e18d37.jpg" alt="">
                </div>
                <div class="d-title">
                    <div>
                        AJ1 AIR JORDAN 1  SE 男子运动鞋 852542 852542-146
                    </div>
                </div>
                <div class="number">
                    <div class="price">¥999.00</div>
                    <div class="num">X2</div>
                </div>
            </div>
            <div class="d-total">
                <div class="text">
                    共1件商品，总金额
                    <span>￥1798.20</span>
                </div>
            </div>
            <div class="seeDetail">
                <div class="button">
                    查看详情
                </div>
            </div>
        </div>
        <div class="detail">
            <div class="d-top">
                <div class="time">2022-01-07 14:23:04</div>
                <div class="status">未发货</div>
            </div>
            <div class="d-content">
                <div class="img">
                    <img src="http://47.115.51.185//uploads/attach/2021/06/20210626/8748d30c0690284c24c8002f85e18d37.jpg" alt="">
                </div>
                <div class="d-title">
                    <div>
                        AJ1 AIR JORDAN 1  SE 男子运动鞋 852542 852542-146
                    </div>
                </div>
                <div class="number">
                    <div class="price">¥999.00</div>
                    <div class="num">X2</div>
                </div>
            </div>
            <div class="d-total">
                <div class="text">
                    共1件商品，总金额
                    <span>￥1798.20</span>
                </div>
            </div>
            <div class="seeDetail">
                <div class="button">
                    查看详情
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            flag : 0,
        }
    },

}
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.order{
    position: absolute;
    top: 40px;
    width: 100%;
    min-height: 100%;
    z-index: 1002;
    background: #f5f5f5;
    font-size: 18px;
    .top{
        background: @color4;
        height: 100px;
        color: white;
        padding: 20px;
        text-align: center;;
        font-size: 20px;
        font-weight: bold; 
        box-sizing: border-box;
    }
    .tab{
        width: 95%;
        margin: -20px auto 0 ;
        background: white;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        .t-item{
            flex-basis: 23%;
            padding: 10px 10px 0;
            box-sizing: border-box;
            font-size: 18px;
            >div{
                text-align: center;
                margin: 10px 0 ;
            }
        }
        .t-item.active{
            border-bottom: 1px solid @color4;
        }
    }
    .detail{
        width: 95%;
        margin: 10px auto 0 ;
        border-radius: 10px;
        background: white;
        .d-top{
            display: flex;
            padding: 10px;
            padding-right: 15px;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
            .status{
                color: @color4;
            }
        }
        .d-content{
            display: flex;
            padding: 10px;
            justify-content: space-between;
            .img{
                flex-basis: 25%;
                img{
                    width: 100%;
                }
            }
            .d-title{
                flex-basis: 50%;
                font-size: 16px;
                padding: 10px;
                >div{
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
            .number{
                flex-basis: 20%;
                font-size: 15px;
                color: gray;
                padding: 10px 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: end;
            }
        }
        .d-total{
            border-bottom: 1px solid #ccc;
            padding: 10px 10px 20px;
            display: flex;
            justify-content: end;
            .text{
                span{
                    color : @color4
                }
            }
        }
        .seeDetail{
            padding: 10px;
            display: flex;
            justify-content: end;
            .button{
                padding: 10px;
                background:  red;
                color : white;
                border-radius: 20px;
            }
        }
    }
}
</style>